<script lang="ts" setup>
import type { Exposed, OpenData } from './type'
import { Modal } from 'ant-design-vue'
import { ref } from 'vue'

defineOptions({
  name: 'VideoPreviewModal',
})
const open = ref(false)
const currentItem = ref<Nullable<OpenData>>()
defineExpose<Exposed>({
  open(_data) {
    currentItem.value = _data
    open.value = true
  },
})

function handleCancel() {
  open.value = false
  currentItem.value = null
}
</script>

<template>
  <Modal v-model:open="open" title="视频预览" :footer="null" @cancel="handleCancel">
    <div class="box-border">
      <video :src="currentItem?.url" controls class="block w-full h-full object-contain" />
    </div>
  </Modal>
</template>
